// src/pages/Products/index.tsx
import Header from '../../components/Header';
import { useNavigate } from 'react-router-dom';
import './index.css';

// 使用 import.meta.glob 动态导入所有产品图片
const imageModules = import.meta.glob('../../assets/products/*.{png,jpg,jpeg,svg}', { eager: true });

// 处理导入的图片模块
const images: Record<string, string> = {};
Object.keys(imageModules).forEach((key) => {
  const cas = key.split('/').pop()?.replace(/\.(png|jpe?g|svg)$/, '') || '';
  // @ts-ignore
  images[cas] = imageModules[key].default || imageModules[key];
});

// 产品数据
const products = [
  {
    id: 1,
    cas: '1653-64-1',
    name: '胡椒乙胺',
    formula: 'C9H12ClNO2',
    molecularWeight: 165.19,
    description: ''
  },
  {
    id: 2,
    cas: '86-51-1',
    name: '2,3-二甲氧基苯甲醛',
    formula: 'C9H10O3',
    molecularWeight: 166.17,
    description: ''
  },
  {
    id: 3,
    cas: '430433-40-2',
    name: '黄连素中间体',
    formula: 'C18H22ClNO4',
    molecularWeight: 351.83,
    description: ''
  },
  // {
  //   id: 4,
  //   cas: '25646-77-9',
  //   name: '4-(N-乙基-N-羟乙基)-2-甲基苯二胺硫酸盐',
  //   formula: 'C11H20N2O5S',
  //   molecularWeight: 292.35,
  //   description: ''
  // },
  {
    id: 5,
    cas: '571-57-3',
    name: '4-溴萘酚',
    formula: 'C10H7BrO',
    molecularWeight: 223.07,
    description: ''
  },
  {
    id: 6,
    cas: '6418-38-8',
    name: '2,3-二氟苯酚',
    formula: 'C6H4F2O',
    molecularWeight: 130.09,
    description: ''
  },
  {
    id: 7,
    cas: '59951-65-4',
    name: '1-溴-4-苯基萘',
    formula: 'C16H11Br',
    molecularWeight: 283.16,
    description: ''
  },
  {
    id: 8,
    cas: '4138-26-5',
    name: '3-哌啶甲酰胺',
    formula: 'C6H12N2O',
    molecularWeight: 128.17,
    description: ''
  },
  {
    id: 9,
    cas: '110-99-6',
    name: '二甘醇酸',
    formula: 'C4H6O5',
    molecularWeight: 134.09,
    description: ''
  },
  {
    id: 10,
    cas: '144-83-2',
    name: '磺胺吡啶',
    formula: 'C11H11N3O2S',
    molecularWeight: 249.29,
    description: ''
  },
  {
    id: 11,
    cas: '446-10-6',
    name: '4-氟-2-硝基甲苯',
    formula: 'C7H6FNO2',
    molecularWeight: 155.13,
    description: ''
  },
  {
    id: 12,
    cas: '4637-24-5',
    name: 'N,N-二甲基甲酰胺二甲基缩醛',
    formula: 'C5H13NO2',
    molecularWeight: 119.16,
    description: ''
  },
  {
    id: 13,
    cas: '40311-13-5',
    name: '6-氟-2-甲基吲哚',
    formula: 'C9H8FN',
    molecularWeight: 149.16,
    description: ''
  },
  {
    id: 14,
    cas: '632-22-4',
    name: '四甲基脲',
    formula: 'C5H12N2O',
    molecularWeight: 116.16,
    description: ''
  },
  {
    id: 15,
    name: '磷酸二叔丁酯钾盐',
    formula: 'C8H18KO4P',
    cas: '33494-80-3',
    molecularWeight: 248.3,
    description: ''
  },
];

const ProductsPage = () => {
  const navigate = useNavigate();

  return (
    <div className="products-container">
      <Header
        title="产品展示"
        showBack={true}
        onBack={() => navigate(-1)}
      />
      <div className="products-content">
        <div className="products-header">
          <h1>我们的产品</h1>
          <p>专业生产各类液晶中间体和医药中间体</p>
        </div>

        <div className="products-intro">
          <p>澄城海泰电子材料有限责任公司专注于液晶中间体和医药中间体的研发与生产，拥有多条专业生产线，产品广泛应用于电子、医药、化工等领域。</p>
        </div>

        <div className="products-grid">
          {products.map(product => (
            <div className="product-card" key={product.id}>
              <div className="product-image-container">
                {images[product.cas] ? (
                  <img
                    src={images[product.cas]}
                    alt={product.name}
                    className="product-image"
                    onError={(e) => {
                      const target = e.target as HTMLImageElement;
                      target.style.display = 'none';
                      // 显示占位符
                      const parent = target.parentElement;
                      if (parent) {
                        const placeholder = document.createElement('div');
                        placeholder.className = 'image-placeholder';
                        placeholder.innerHTML = `
                          <div class="placeholder-text">CAS: ${product.cas}</div>
                          <div class="placeholder-subtext">分子结构图</div>
                        `;
                        parent.appendChild(placeholder);
                      }
                    }}
                  />
                ) : (
                  <div className="image-placeholder">
                    <div className="placeholder-text">CAS: {product.cas}</div>
                    <div className="placeholder-subtext">分子结构图</div>
                  </div>
                )}
              </div>
              <div className="product-info">
                <h3 className="product-name">{product.name}</h3>
                <p className="product-cas">CAS: {product.cas}</p>
                <p className="product-formula">分子式: {product.formula}</p>
                <p className="product-molecular-weight">分子量: {product.molecularWeight}</p>
                {/* <p className="product-description">{product.description || '暂无描述'}</p> */}
              </div>
            </div>
          ))}
        </div>

      </div>
    </div>
  );
};

export default ProductsPage;